<template>
  <div class="autumn-container">
    <!-- 面包 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/system/account/accountList' }">账户列表</el-breadcrumb-item>
      <el-breadcrumb-item>账户信息</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <div class="autumn-center">
      <div class="edit-form">
        <el-form ref="editFormRef" size="large" label-width="90px" disabled :model="editForm">
          <el-row>
            <el-col :span="24">
              <el-form-item label="图像">
                <el-avatar shape="square" :src="$previewUrl(editForm.avatar)" :size="150" v-if="editForm.avatar" />
                <img :src="noAvatar" v-else />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="账号" prop="loginName">
                <el-input v-model="editForm.loginName" :disabled="editForm.id ? true : false" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="editForm.name" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工号" prop="code">
                <el-input v-model="editForm.code" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="editForm.gender">
                  <el-radio :label="'1'">男</el-radio>
                  <el-radio :label="'2'">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属机构" prop="organId">
                <autumn-tree-select size="large" :data="treeOrgans" :defaultKey="editForm.organId" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属部门" prop="departIds">
                <autumn-tree-select :multiple="true" size="large" :data="treeDeparts" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="直系领导" prop="directLeaderName">
                <el-input v-model="editForm.directLeaderName" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="editForm.email" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系方式" prop="phone">
                <el-input v-model="editForm.phone" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所在地区" prop="areaCode">
                <autumn-area v-model="treeAreas"></autumn-area>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="常住地址" prop="address">
                <el-input v-model="editForm.address" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="管理员" prop="isAdmin">
                <el-radio-group v-model="editForm.isAdmin">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" resize="none" v-model="editForm.remark" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="form-foot-button">
          <el-button @click="cancel">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { viewAccount } from 'src/api/system/account'
import { listOrgan } from 'src/api/system/organ'
import { listDepart } from 'src/api/system/department'
import { $previewUrl } from 'src/hooks/useCommon'
import noAvatar from 'src/assets/no_avatar.png?url'

// 定义表单数据
const editForm = reactive({
  id: '',
  loginName: '',
  code: '',
  name: '',
  gender: '1',
  organId: '',
  avatar: '',
  email: '',
  phone: '',
  areaCode: '',
  address: '',
  isAdmin: 0,
  remark: '',
  directLeader: '',
  directLeaderName: '',
  departIds: []
})

// 修改时填充表单数据
const treeAreas = ref<string>('')
const route = useRoute()
if (route.query.id) {
  const id = route.query.id as string
  viewAccount(id).then(({ data }) => {
    Object.assign(editForm, data)
    if (data.areaCode) {
      treeAreas.value = data.areaCode
    }
  })
}

// 初始化机构
const treeOrgans = ref<Array<any>>([])
listOrgan().then(({ data }) => {
  treeOrgans.value = data
})

// 初始化部门
const treeDeparts = ref<Array<any>>([])
const initDepart = (organId: string) => {
  listDepart({ organId }).then(({ data }) => {
    treeDeparts.value = data
  })
}
if (route.query.organId) {
  initDepart(route.query.organId as string)
}

const router = useRouter()
const cancel = () => {
  router.push('/system/account/accountList')
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  border: 1px dashed #cccccc;
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>
